<template>
  <div class="content">
    <h2>{{ title }}分类</h2>
    <!-- 
      在封装组件的时候，使用slot标签进行占位，这个位置就是插槽区域，未来在使用组件的时候，可以向插槽区域插入内容或者结构

      因为我们可能会给一个组件添加多个插槽，未来区分，我们会给插槽的slot标签使用name属性命名
      被命名的插槽被称为具名插槽
      没有被命名的插槽被作为匿名插槽(默认插槽),因为匿名插槽默认的name属性是default
     -->
    <slot></slot>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  name: "Content",
  props: ["title"],
};
</script>

<style scoped>
.content {
  width: 200px;
  height: 400px;
  background: yellowgreen;
}
.content h2 {
  background: orange;
  text-align: center;
}
</style>
